<head>
    <script src="../build/index.js"></script>
</head>

<body>
    <canvas id="app" width="800" height="1400"></canvas>

    <script>
        var $app = new Easycanvas.Painter();
        $app.register(document.getElementById('app'));
        $app.start();

        var G = Easycanvas.ImgLoader('https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/G.png');
        var r = Easycanvas.Transition.pendulum(-90, 90, 1000).loop();

        var Sprite1 = $app.add({
            content: {
                img: G,
            },
            style: {
                rotate: r,
                rx: 250, ry: 200,
                left: 250, top: 200,
            }
        });

        var Sprite2 = $app.add({
            content: {
                img: G,
            },
            style: {
                rotate: r,
                rx: 500, ry: Easycanvas.Transition.pendulum(100, 700, 700),
                left: 500, top: 200,
            }
        });

    </script>
</body>

